<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 过渡效果</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

    <link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
    <style>
        /*.list-move {*/
            /*transition: transform 1s;*/
        /*}*/
    </style>
</head>
<body>
<div id="app">
    <transition
                name="custom-classes-transition"
                enter-active-class="animated tada"
             >
        <div v-if="show" >显示出来</div>
    </transition>

    <transition-group name="list" tag="ul" move-class="animated fadeIn">

    <li v-for="item in items" v-bind:key="item" class="list-item" >
      {{ item }}
    </li>

    </transition-group>

    <button v-on:click="shlt">打乱</button>
</div>

<script>

    let vm = new Vue({
        el:"#app",
        data:{
            show:false,
            items:[1,2,3,4,5,6,7]
        },
        methods:{
            beforeEnter:function () {
                console.log('before')
            },
            enter:function(){

            }
        },
        methods:{
            shlt:function () {
                this.items = _.shuffle(this.items)
            }
        }

    })
</script>
</body>
</html>